

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>http-获取省级城市地区列表数据</title>
</head>
<body>
    <select name="" id="one">
        <option value="">--请选择省份--</option>
    </select>
    <br>
    <select name="" id="two">
        <option value="">--请选择城市--</option>
    </select>
    <br>
    <select name="" id="three">
        <option value="">--请选择地区--</option>
    </select>
    <!-- 引入封装好的网络请求公共函数 -->
     <script src="./http.js"></script>
    <script>

    //当前省份名称
     let one = document.querySelector("#one")
     let two = document.querySelector("#two")
     let three = document.querySelector("#three")

     let provinceName = ""
     

        request("get","https://hmajax.itheima.net/api/province")
        .then(result =>{
            let{message, list }= result
           let str = list.map((item,index)=>{
                return `<option value="${item}">${item}</option>`
            })

            // console.log(str);
            one.innerHTML = `<option value="">--请选择省份--</option>` + str.join("")
        })
        .catch(error => console.log('error', error));
        

       // 2.2监听省份数据的变化 获取对应的城市数据
        one.addEventListener("click",function () {
            request("get",`https://hmajax.itheima.net/api/city?pname=${this.value}`)
                .then(result =>{
                    console.log(result)
                    let{message, list }= result
                    let str = list.map((item,index)=>{
                        return `<option value="${item}">${item}</option>`
                    })

                    // console.log(str);
                    two.innerHTML = `<option value="">--请选择城市--</option>` + str.join("")
                    provinceName = this.value;
                }) 
                .catch(error => console.log('error', error));
        })


        // 2.3监听城市数据的变化 获取对应的区域数据
        two.addEventListener("click",function () {
            request("get",`https://hmajax.itheima.net/api/area?pname=${provinceName}&cname=${this.value}`)
                .then(result =>{
                    console.log(result)
                    let{message, list }= result
                    let str = list.map((item,index)=>{
                        return `<option value="${item}">${item}</option>`
                    })

                    // console.log(str);
                    three.innerHTML = `<option value="">--请选择地区--</option>` + str.join("")

                }) 
                .catch(error => console.log('error', error));
        })




            
    </script>
</body>
</html>